<template>
  <div class="pagination">
    <!-- 每页条数显示器+回到第一页+上一页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageInfo.pageCurrent"
      :page-sizes="[20, 50 ,100]"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.total"
      layout=" sizes,slot"
    >
      <span
        style="vertical-align: middle;display: inline-block; min-width: 25px;height: 22px;text-align: center;border-left: 1px solid #ccc;"
      >
        <i class="pageImg pageIcon1" @click="handleCurrentChange(1)"></i>
      </span>
      <span
        style="vertical-align: middle; display: inline-block; min-width: 25px;height: 22px;text-align: center;border-right: 1px solid #ccc;"
      >
        <i
          class="pageImg pageIcon2"
          @click="handleCurrentChange(pageInfo.pageCurrent>1?pageInfo.pageCurrent-1:pageInfo.pageCurrent)"
        ></i>
      </span>
    </el-pagination>
    <!-- 前往第几页+共多少页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.pageCurrent"
      :total="pageInfo.total"
      layout="jumper,slot"
    >
      <span
        style="color:#606266;font-weight: normal;"
      >,共{{Math.ceil(pageInfo.total/pageInfo.pageSize)}}页</span>
    </el-pagination>
    <!-- 下一页+尾页+刷新 -->
    <el-pagination
      style="flex:1"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      layout="slot,->,total"
      :total="pageInfo.total"
    >
      <span
        style="display: inline-block; min-width: 25px;height: 22px;text-align: center;border-left: 1px solid #ccc;"
      >
        <i
          class="pageImg pageIcon3"
          @click="handleCurrentChange(pageInfo.pageCurrent<Math.ceil(pageInfo.total/pageInfo.pageSize)?pageInfo.pageCurrent+1:pageInfo.pageCurrent)"
        ></i>
      </span>
      <span
        style=" display: inline-block; min-width: 25px;height: 22px;text-align: center;border-right: 1px solid #ccc;"
      >
        <i
          class="pageImg pageIcon4"
          @click="handleCurrentChange(Math.ceil(pageInfo.total/pageInfo.pageSize))"
        ></i>
      </span>
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    page: {
      type: Object,
      default: () => {
        return {
          // 当前页数
          pageCurrent: 1,
          // 当前页条数
          pageNum: 0,
          //每页条数
          pageSize: 100,
          total: 0,
        };
      },
      required: true,
    },
  },
  data() {
    return {
      pageInfo: this.page,
    };
  },
  methods: {
    queryPage() {
      this.$emit("pageChange", this.pageInfo);
    },
    handleSizeChange(newsize) {
      if (this.pageInfo.pageSize == newsize) {
        return;
      } else {
        this.pageInfo.pageSize = newsize;
        this.$nextTick(() => {
          this.queryPage();
        });
      }
    },
    handleCurrentChange(newnum) {
      if (this.pageInfo.pageCurrent == newnum) {
        return;
      } else {
        this.pageInfo.pageCurrent = newnum;
        this.$nextTick(() => {
          this.queryPage();
        });
      }
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
.pagination {
  background-color: #f4f4f4;
  border-top: 1px solid #ccc;
  display: flex;
  align-items: center;
  .el-pagination{display: flex; align-items: center;}
  .pageImg {
    display: inline-block;
    width: 16px;
    height: 16px;
  }
  .pageIcon1 {
    background: url("~@/assets/images/icon/pagination_icons.png") no-repeat 0
      center;
  }
  .pageIcon2 {
    background: url("~@/assets/images/icon/pagination_icons.png") no-repeat -16px center;
  }
  .pageIcon3 {
    background: url("~@/assets/images/icon/pagination_icons.png") no-repeat -32px center;
  }
  .pageIcon4 {
    background: url("~@/assets/images/icon/pagination_icons.png") no-repeat -48px center;
  }
  .pageIcon5 {
    background: url("~@/assets/images/icon/pagination_icons.png") no-repeat -64px center;
  }
  .Refresh {
    font-size: 13px;
    color: #606266;
    font-weight: normal;
  }
  .Refresh:hover {
    cursor: pointer;
    color: #1478bb;
  }
  /deep/.el-pagination__sizes {
    height: 25px;
    line-height: 25px;
    margin: 0;
  }
  /deep/.el-input__inner {
    height: 25px;
  }
  /deep/.el-pagination__jump {
    margin: 0;
  }
}
</style>